<template>
  <div class="focus" v-cloak v-on:mouseover="stop" v-on:mouseout="showPic">
    <ul class="focusUl">
      <li v-for="(scroll,scrollIndex) in scrolls"  v-show="scrollIndex==num" :key="scroll.name">
        <img :src="getImgUrl(scroll.imgsrc)">
      </li>
    </ul>
    <div class="focusSpan">
       <span v-for="(span,spanIndex) in spans" v-on:mouseover="changePic(spanIndex)">
         <span class="contentSpan" v-text="span" />
         <span class="coverSpan"/>
       </span>
    </div>
  </div>
</template>

<script>
  import api from "../../../axios/api"

  export default {
    name: "scrolls",
    data() {
      return {
        scrolls: [],
        num : 3,
        timer:null,//timer用于保存定时器方法的返回值 也就是定时器的句柄（遥控器）
        spans:[]
      }
    },
    methods: {
      getImgUrl: function (imgsrc) {
        return "../../../static/images/scrolls/" + imgsrc;
      },
      setDataFromAxios: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/scrolls", null, "post")
          .then(res => {
            this.scrolls = res.scrolls;
            this.initSpan(this.scrolls);
            this.showPic();
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      initSpan : function(scrolls){
        //console.log(scrolls);
        var spansHTML = "";
        for(var index = 0;index < scrolls.length;index++ ){
          this.spans.push(scrolls[index].name);
        }
      },
      showPic:function(){
        this.timer= setInterval(()=>{
          this.num++;
          if(this.num==4){
            this.num=0
          }

        },1000)
      },
      changePic:function(index){
        stop();
        console.log(index);
        this.num = index;
      },
      stop(){
        clearInterval(this.timer);//因为可以同时开启多个定时器，所以停止定时器的时候需要指明停止哪一个
        //// 要把开启定时器的返回值也就 是定时器的遥控器传入停止方法
      }
    },
    created() {
      this.setDataFromAxios();
    }
  }
</script>

<style scoped lang="stylus">
  [v-cloak] {
    display: none!important;
  }
  .focus
    margin 0 auto
    width 1000px
    height 280px
    position relative

    .focusUl
      margin 0
      padding 0
      width 5000px


      li
        list-style none
        float left
        width 1000px
        position absolute
        left 0
        right 0

        img
          width 1000px
          height 280px
    .focusSpan
       position absolute
       bottom  0
       z-index 1
       span
         position relative
         width 40px
         height 40px
         display inline-block
         margin-left 10px
         color white
         span
          width 40px
          height 40px
          font-size 12px
          text-align center
          line-height 40px
          position absolute
        .coverSpan
          z-index -1
          opacity 0.7
          background-color black


  .focus:after
    display block
    content ""
    clear both
</style>
